<template>
  <div class="chain_data_container">
    <div class="title">
      <img src="../../assets/common/r_title_1.png" alt="">
    </div>
    <div class="chain_data_box">
      <div class="item">
        <h4>7664</h4>
        <p>今日交易数</p>
      </div>
      <div class="item">
        <h4>XX链</h4>
        <p>最活跃子链</p>
      </div>
      <div class="item">
        <h4>8545</h4>
        <p>跨链交易总数</p>
      </div>
    </div>
    <div class="chain_data_con">
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="classOption">
        <ul class="scroll_con">
          <li v-for="(item,index) in listData" :key="index">
            <div class="avatar">
              <img src="../../assets/common/chain_data_box.png" alt="">
            </div>
            <div class="chain_data_text">
              <div class="chain_data_text_title">执法存证链</div>
              <div class="content_time">
                <span>内容：存证</span>
                <span class="time">时间：2021/11/30 10:13</span>
              </div>
              <div class="deal">交易哈希：d4f976e45e457467ewa573457467</div>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [{
        'title': '无缝滚动第一行无缝滚动第一行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第二行无缝滚动第二行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第三行无缝滚动第三行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第四行无缝滚动第四行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第五行无缝滚动第五行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第六行无缝滚动第六行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第七行无缝滚动第七行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第八行无缝滚动第八行',
        'date': '2017-12-16'
      }, {
        'title': '无缝滚动第九行无缝滚动第九行',
        'date': '2017-12-16'
      }]
    }
  },
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 0, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }

  }

}
</script>

<style lang="less" scoped>
.chain_data_container{
    height: 446px;
    background: url('../../assets/common/r_item_1.png') no-repeat;
    background-size: 100%;
    margin-bottom: 12px;
     .title{
        padding: 18px 0 14px 30px;
    }
    .chain_data_box{
        display: flex;
        padding-left: 30px;
        margin-bottom: 20px;
        .item{
            width: 115px;
            height: 68px;
            text-align: center;
            background: url('../../assets/common/r_box.png') no-repeat;
            &:nth-child(2){
                margin:0 19px;
            }
            h4{
                color: #FFF000;
                font-size: 20px;
                margin:9px 0 5px 0;
            }
            p{
                color: #1FFCE5;
                font-size: 14px;

            }
        }

    }
    .chain_data_con{
        width: 100%;
        height: 305px;
        overflow: hidden;
        .scroll_con{
            overflow: hidden;
            height: 100%;
            padding: 0 30px;
            li{
                display: flex;
                padding: 14px;
                color: #1FFCE5;

                background-color: #092B43;
                margin-bottom: 10px;
                .chain_data_text{
                    margin-left: 10px;
                    .chain_data_text_title{
                        font-size: 14px;
                        font-weight: 700;
                    }
                    .content_time{
                        margin:4px 0 6px 0;
                        font-size: 12px;
                        .time{
                            margin-left: 40px;
                        }
                    }
                    .deal{
                        font-size: 12px;
                    }
                }
            }
        }
    }
}

</style>
